<script lang="ts" setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
import { cancelPaidOrder } from '@/api/orders';
import { usePopup } from '@/utils/popup';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const { popupRef, open } = usePopup();

const props = defineProps<{
  isDone?: boolean;
  amount?: number;
  orderSn?: string;
  preCancelOrderSn?: string;
}>();

const placeholderHeight = ref(0);

onMounted(() => {
  const { safeArea, screenHeight } = uni.getWindowInfo();
  const safeAreaInset = screenHeight - safeArea.bottom;
  const instance = getCurrentInstance();
  const query = uni.createSelectorQuery().in(instance?.proxy);
  query
    .select('.order-refund-details__footer')
    .boundingClientRect((data) => {
      if (data) {
        const height = (data as UniApp.NodeInfo).height!;
        placeholderHeight.value = height + safeAreaInset;
      }
    })
    .exec();
});

const emit = defineEmits(['success']);

async function handleConfirmCancelOrder() {
  const res = await cancelPaidOrder(props.orderSn!, props.preCancelOrderSn!);
  if (res.code === 0) {
    emit('success');
  }
}
</script>

<template>
  <view class="order-refund-details__footer">
    <view v-if="isDone" class="flex justify-end items-center pt-3 px-4">
      <view class="ml-2 order-refund-details__footer-btn is-done">已退款</view>
    </view>
    <view v-else class="flex justify-between items-center pt-3 px-4">
      <view class="flex items-baseline">
        <view class="mr-1 text-xs text-primary">{{ t('LOKey_orderRefundAmountShould') }}:</view>
        <view class="text-sm text-red">
          <text>¥</text>
          <text style="font-size: 48rpx">{{ amount }}</text>
          <text>JPY</text>
        </view>
      </view>
      <view class="ml-2 order-refund-details__footer-btn" @click="open">
        {{ t('LOKey_orderRefundNow') }}
      </view>
    </view>
    <apt-safe-area></apt-safe-area>
  </view>
  <view :style="{ height: `${placeholderHeight}px` }"></view>

  <uni-popup ref="popupRef" type="dialog">
    <uni-popup-dialog
      :cancel-text="t('ThinkAgain')"
      :confirm-text="t('LLKey_loginCheckConfirm')"
      :content="t('LRKey_cancelOrder')"
      :title="t('ConfirmCancellation')"
      show-close
      type="info"
      @confirm="handleConfirmCancelOrder"
    ></uni-popup-dialog>
  </uni-popup>
</template>

<style lang="scss">
.order-refund-details__footer {
  background-color: #fff;
  bottom: 0;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(99, 99, 99, 0.2);
  left: 0;
  position: fixed;
  right: 0;
}

.order-refund-details__footer-btn {
  background-color: #269c74;
  border: 1rpx solid #269c74;
  border-radius: 282rpx;
  color: #fff;
  font-size: 24rpx;
  line-height: 34rpx;
  padding: 16rpx 32rpx;

  &.is-done {
    background-color: #d8d8d8;
    border: 1rpx solid #d8d8d8;
    color: #269c74;
  }
}
</style>
